<template>
	<view class="main" style="padding-bottom: 100rpx;position: relative;">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-40" @click="UserInfo">
			<view class="u-m-r-10">
				<u-avatar :src="userPicSrc" size="140" mode="circle"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{userName}}</view>
				<view class="u-font-14 u-light-color">{{mobile}}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
			</view>
		</view>
		<view class="weixin" @click="Wechart" v-show="wxshow">
			<u-icon name="weixin-circle-fill" color="#fff" size="60"></u-icon>
		</view>
		<view class="money">
			<view style="margin-left: 20rpx; ">
				<view style="color: rgba(0,0,0,.4); font-size: 26rpx;">累计收益(元)</view>
				<view style="font-size: 50rpx; font-weight: 600; margin-top: 10rpx;">{{userMoney}}</view>
			</view>
			<!-- <u-button class="button" size="mini" shape="circle" style="position:absolute;right:140rpx" @click="getMoney">
				提现</u-button> -->
			<u-button class="button" size="mini" shape="circle" style="position:absolute;right:50rpx" @click="detail">
				明细</u-button>

		</view>
		<view class="u-m-t-50">
			<u-cell-group>
				<u-cell-item title="我的任务" @click="myTask">
					<u-icon slot="icon" name="list-dot" style="margin-right: 10rpx;"
						size="32" color="#ff9930"></u-icon>
				</u-cell-item>
				<u-cell-item title="变更手机号" @click="showPhone = true">
					<!-- <u-icon slot="icon" style="color:#36cbcb;margin-right: 10rpx;" size="32" name="account-fill">
					</u-icon> -->
					<image src="@/static/image/icon_phone.png"  slot="icon" mode="aspectFit" style="width: 28rpx;height: 28rpx;margin-right: 10rpx;"></image>
					<!-- <u--image src="@/assets/static/icon_phone.png" width="80rpx" height="80rpx" @click="click"></u--image> -->
				</u-cell-item>
				<u-cell-item title="支付宝绑定" @click="bandingAliPay">
									<u-icon slot="icon" name="zhifubao-circle-fill" style="margin-right: 10rpx;"
										size="32" color="#1890ff"></u-icon>
								</u-cell-item>
				<u-cell-item title="我的收藏" @click="collection">
					<u-icon slot="icon" name="star-fill" style="margin-right: 10rpx;color: #ff9930;" size="32">
					</u-icon>
				</u-cell-item>
				<u-cell-item title="联系我们" @click="show = true">
					<u-icon slot="icon" style="color:#36cbcb;margin-right: 10rpx;" size="32" name="account-fill">
					</u-icon>
				</u-cell-item>
				<u-cell-item title="关于我们" @click="aboutUs">
					<u-icon slot="icon" style="color:#3aa0ff;margin-right: 10rpx;" size="32" name="error-circle-fill">
					</u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view>
			<u-button style="color: #FFF; background-color: #1890ff; width: 90%; margin-top: 100rpx;" @click="logOut">退出
			</u-button>
		</view>
		<view class="img">
			<u-image style="margin: 200rpx auto 0;" width="30%" mode="widthFix" src="@/static/logo.png"></u-image>
		</view>
		<view>
			<u-popup v-model="show" mode="center" width="500rpx" height="300rpx" border-radius="14" closeable
				close-icon-pos="top-right">
				<view class="contactUs">
					<view style="margin: 20rpx 0; font-size:48rpx;font-weight: 300; color: rgba(0,0,0,0.5)">
						<u-icon name="server-fill" color="#bebebe" size="40"></u-icon>
						客服电话
					</view>
					<view style="font-weight: 600;font-size:40rpx ;">{{telNum}}</view>
					<u-button @click="copy" class="button" style="width: 300rpx;margin: 20rpx 0;">复制号码</u-button>
				</view>
			</u-popup>
		</view>
		<!-- 变更手机号 -->
		<view>
			<u-popup v-model="showPhone" mode="center" border-radius="14" >
				<view class="changePhone">
					<view style="margin: 20rpx 0;color: #2F2F2F;opacity: 0.5;">
						现在绑定的手机号：{{mobile}}
					</view>
					<u-form :model="form" ref="uForm" class="form" :rules="rules">
						<u-form-item label-width="180" prop="mobile" label="修改手机号：" style="color: #2F2F2F;">
							<u-input v-model="form.mobile" placeholder="" :clearable="false" style="background: #E9E7E7; border-radius: 3px;" />
						</u-form-item>
						<u-form-item label-width="100" prop="code" label="" class="label">
							<u-input v-model="form.code" placeholder="请输入验证码"  :clearable="false" />
							<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange">
							</u-verification-code>
							<u-button size="mini" style="color: #2979ff;" plain @tap="getCode">{{tips}}</u-button>
						</u-form-item>
						<u-button style="margin-top: 40rpx;" type="primary" shape="circle" @click="submit">确认</u-button>
					</u-form>
				</view>
			</u-popup>
		</view>
		<!-- 提示信息 -->
		<view>
			<u-modal ref='proPostModal' v-model="tipsShow" :show-cancel-button="true" cancel-color="#ccc"
				confirm-color="#f29100" :async-close="true" :zoom="true" @confirm="confirm">
				<view style="width: 80%; margin: 60rpx auto;line-height: 50rpx;text-align: center;">
					<!-- <view class="">
						请您完善您的银行卡信息，方便平台给您支付报酬。
					</view>
					<view class="">
						如您已授权微信登录，则平台支付的报酬到您的微信钱包。
					</view> -->
					<view class="">
						绑定微信信息？
					</view>
				</view>
			</u-modal>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userMobile: "",
				mobile: "", //155****4545
				userName: "",
				userExpert: '',
				userPicSrc: "",
				userMoney: "",
				telNum: "",
				show: false,
				showPhone:false,
				tipsShow: false,
				appId: "",
				code: '',
				wxshow: false,
				form: {
					mobile: "",
					code: "",
				},
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				},
				seconds: 60,
				tips: "",
			}
		},
		onLoad() {
			this.geAppId()
			this.code = this.getUrlParam("code");
			if (this.code) {
				this.$u.api.empowerWeChatCode(
				{code: this.code}
				).then(res => {
					if (res.code == 1) {
						this.getUserInfo()
					}
				})
			}
			if (!this.$u.untils.isLogin()) return
			this.getTelNum()
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 支付宝绑定
			bandingAliPay(){
				this.$Router.push({
					name: 'bandingAliPay' 
				})
			},
			// 退出登录
			logOut() {
				this.$u.vuex('vuex_token', '');
				// this.$u.route({
				// 	type: "redirect",
				// 	url: "/pages/login/login",
				// 	params:{isLogout: true}
				// })
				if (window.location.href.indexOf("?code=") != -1) {
					var newUrl = location.href.split("?")[0];
					history.pushState('', '', newUrl); //参数可省略
				}
				this.$Router.push({
					name: 'login',
					quary: {
						isLogout: true
					}
				})
			},
			// 客服电话号码
			getTelNum() {
				this.$u.api.getConfigInfo({
					key: 'telphone'
				}).then(res => {
					this.telNum = res.data.value
				})
			},
			// 获取appid
			geAppId() {
				this.$u.api.getConfigInfo({
					key: 'appid'
				}).then(res => {
					if (res.code == 1) {
						this.appId = res.data.value
					}
				})
			},
			// 判断公众号截取code
			getUrlParam(name) {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				}
				return null;
			},
			// 微信授权
			Wechart() {
				this.tipsShow = true
			},
			confirm() {
				this.code = "";
				let code = this.getUrlParam("code");
				let local = window.location.href;
				window.location.href =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appId}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
			},
			// 得到个人信息
			getUserInfo() {
				this.$u.api.getUserInfo().then(res => {
					this.userMoney = res.data.money
					this.userName = res.data.nickname
					this.userExpert = res.data.expert
					this.mobile = res.data.mobile
					this.userPicSrc = res.data.avatar
					this.userMobile = res.data.mobile
					if (res.data.openid == null || res.data.openid === "" || res.data.avatar.indexOf('data:') !== -1) {
						this.wxshow = true
					} else {
						this.wxshow = false
					}
					// if (res.data.avatar.indexOf('data:') !== -1){
					// 	this.wxshow = true
					// } else {
					// 	this.wxshow = false
					// }
				})
			},
			// 转向个人信息
			UserInfo() {
				// this.$u.route({
				// 	url: "/pages/center/userInfo/userInfo",
				// 	params: {
				// 		userName: this.userName,
				// 		userExpert: this.userExpert,
				// 		userPicSrc: encodeURIComponent(this.userPicSrc),
				// 		userMobile: this.userMobile
				// 	},
				// })
				this.$Router.push({
					path: '/userInfo',
					query: {
						// userName: this.userName,
						// userExpert: this.userExpert,
						userPicSrc: encodeURIComponent(this.userPicSrc),
						userMobile: this.userMobile
					}
				})
			},
			// 复制信息
			copy() {
				this.show = false
				//uni.setClipboardData方法就是讲内容复制到粘贴板
				uni.setClipboardData({
					data: this.telNum, //要被复制的内容
					success: function() {
						//在success中加入uni.hideToast()可以解决
						this.$u.toast('复制成功');
					},
					fail: function(err) {
						this.$u.toast('复制失败');
					}
				});
			},
			aboutUs() {
				// this.$u.route("/pages/center/aboutUs/aboutUs")
				this.$Router.push({
					name: 'aboutUs'
				})
			},
			myTask() {
				this.$Router.push({
					name: 'myTask'
				})
			},
			collection() {
				this.$Router.push({
					name: 'myCollect'
				})
			},
			getMoney() {
				this.$u.route("/pages/center/getMoney/getMoney", {
					money: this.userMoney
				})
			},
			detail() {
				// this.$u.route("/pages/center/detail/detail")
				this.$Router.push({
					name: 'centerDetail'
				})
			},
			codeChange(text) {
				this.tips = text
			},
			getCode() {
				//手机格式校验
				if (!this.$u.test.mobile(this.form.mobile)) {
					this.$refs.uToast.show({
						title: "请输入正确的手机号",
						type: 'error',
					});
					this.form.mobile = ""
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					// 后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let data = {
						// event: 'mobilelogin',
						mobile: this.form.mobile
					}
					this.$u.api.smsSend(data).then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.msg)
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				//手机格式校验
				if (!this.$u.test.mobile(this.form.mobile)) {
					this.$refs.uToast.show({
						title: "请输入正确的手机号",
						type: 'error',
					});
					this.form.mobile = ""
					return false
				}
				if(this.form.code && this.form.code != ''){
					//未点击同意服务
					this.$refs.uForm.validate(valid => {
						console.log(valid);
						if (valid) {
							this.setMobile()
						}
					})
				}else{
					this.$refs.uToast.show({
						title: "请输入验证码",
						type: 'error',
					});
				}
				
			},
			// 手机号登录
			async setMobile() {
				this.$u.api.setMobile(this.form).then(res => {
					if (res.code == 0) {
						this.$u.toast(res.msg)
					} else if (res.code == 1) {
						this.$refs.uToast.show({
							title: "手机号修改成功",
							type: 'success',
						});
						this.showPhone = false
						this.getUserInfo()
					}else {
						this.$u.toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import '@/static/icon/iconfont.css';

	page {
		background-color: #FFFFFF;
	}

	.contactUs {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}

	.button {
		background-color: #1890ff;
		color: #FFFFFF;
		width: 100rpx;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		height: 280rpx;
		background-color: #1890ff;
		color: #FFFFFF;
	}

	.weixin {
		position: absolute;
		top: 24rpx;
		left: 120rpx;
		background-color: #18b566;
		border-radius: 50%;
	}

	.money {
		position: relative;
		padding: 40rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		width: 700rpx;
		height: 180rpx;
		margin: 0 auto;
		margin-top: -80rpx;
		border-radius: 20rpx;
		box-shadow: 0px 2px 5px rgba($color: #000000, $alpha: 0.1);
	}
	.changePhone {
		padding: 42rpx 58rpx;
	}
</style>
